<template>
  <div class="course-content">
    <!-- 顶部轮播设置 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in activeAdList" :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 底部课程列表 -->
    <course-content-list
    :fetch-data="fetchData"></course-content-list>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
import courseContentList from '@/components/courseContentList'
import { getAllAds, getQueryCourses } from '@/services/course'
export default {
  name: 'courseContent',
  components: {
    VanSwipe: Swipe,
    VanSwipeItem: SwipeItem,
    courseContentList
  },
  data () {
    return {
      // 轮播图图片列表
      adList: []
    }
  },
  created () {
    // 请求轮播图图片
    this.loadLAds()
  },
  methods: {
    fetchData (options) {
      return getQueryCourses(options)
    },
    async loadLAds () {
      // 此处的999代表了首页顶部轮播图的广告位
      const { data } = await getAllAds({
        spaceKeys: '999'
      })
      this.adList = data.content[0].adDTOList
    }
  },
  // 将数据筛选通过计算属性进⾏处理。
  computed: {
    activeAdList () {
      return this.adList.filter(item => item.status === 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-swipe{
    width: 100%;
}
.my-swipe .van-swipe-item{
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.my-swipe img{
    height: 170px;
}
.course-content-list{
  top: 220px;
  bottom: 50px;
}
</style>
